<template>
  <div class="line-wrap" :style="{ width: width, height: height }">
    <div class="line" ref="line"></div>
  </div>
</template>

<script>
/* eslint-disable */
import echarts from "echarts";
export default {
  props: {
    width: {
      default: () => "100%",
    },
    height: {
      default: () => "100%",
    },
    // toggleIndex: 0,   //  默认legend切换索引

    legend: {
      type: Array,
      default: function () {
        return ["表数量", "字段数量"];
      },
    },
    xAxis: {
      type: Array,
      default: function () {
        return [
          { value: "所属层一" },
          { value: "所属层二" },
          { value: "所属层三" },
          { value: "所属层四" },
        ];
      },
    },
    value: {
      type: Array,
      default: function () {
        return [
          [1320, 1302, 901, 634],
          [320, 460, 301, 334],
        ];
      },
    },
    colors: {
      type: Array,
      default: () => [
        "#0080FE",
        "#8C78F7",
        "#F66664",
        "#FFEA21",
        "#B93DE0",
        "#1AB3FF",
        "#00D97C",
        "#EA518E",
        "#00E3FF",
      ],
    },
    itemStyle: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      option: null,
      chart: null,
      active: 0,
    };
  },

  watch: {
    value() {
      this.setOptions();
    },
  },
  methods: {
    setOptions() {
      this.option = {
        title: {
          textStyle: {
            color: "rgba(24, 144, 255, 1)",
            fontSize: 16,
          },
          left: "3%",
          top: "2%",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "0%",
          right: "6%",
          bottom: "8%",
          top: "16%",
          containLabel: true,
        },
        legend: {
          show: true,
          top: "3%",
          right: "center",
          // itemWidth: 15,
          // itemHeight: 15,
          data: this.legend,
          textStyle: {
            fontSize: 12,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              textStyle: {
                color: "#ffffff",
              },

              interval: 0,
              rotate: -60,
            },
            // boundaryGap: false,

            data: this.xAxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#ddd",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#ffffff",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(54, 61, 82, 0.8)",
              },
            },
          },
        ],
        series: this.legend.map((item, index) => {
          return {
            name: item,
            type: "line",
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: this.colors[index],
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                // shadowOffsetY: 5,
                // shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: this.colors[index],
              },
            },
            itemStyle: {
              color: this.colors[index],
              borderColor: "#fff",
              borderWidth: 2,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: this.colors[index],
                },
                {
                  offset: 1,
                  color: "rgba(47, 47, 47, 1)",
                },
              ]),
            },
            data: this.value[index],
          };
        }),
      };
      this.chartline.setOption(this.option);
      this.chartline.on("click", this.getDetailsData);
    },
    getDetailsData(params) {
      this.$emit("details", params.name);
    },
  },
  mounted() {
    this.chartline = echarts.init(this.$refs.line, null, {
      devicePixelRatio: 2,
    });
    this.setOptions();
    window.addEventListener("resize", () => {
      this.chartline.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
.line-wrap {
  width: 100%;
  position: relative;
}
.line {
  width: 100%;
  margin: 0 auto;
  height: 100%;
}
</style>
